import { MciButton, MciDialog, MciInput } from '@/components/base';
import { ElForm, ElFormItem } from 'element-plus';
import { PropType } from 'vue';

export const BatchTag = defineComponent({
  props: {
    batchVals: {
      type: Array as PropType<string[]>,
      default: () => []
    }
  },
  emits: ['change', 'close'],
  setup(props, { emit }) {
    const strs = ref(props.batchVals);
    const str = ref('');
    str.value = strs.value.join('\n');

    const confirmHandle = async () => {
      const arr = str.value.split('\n');
      emit('change', arr);
    };

    // watch(
    //   () => props.tags,
    //   () => {
    //     strs.value = props.tags || [];
    //     str.value = strs.value.join('\n');
    //   }
    // );

    return () => (
      <>
        <MciDialog
          onClose={() => emit('close')}
          title={'常量的值'}
          draggable={true}
          confirmHandle={confirmHandle}
          modelValue={true}
          width={1000}
          customClass="max-height-dialog">
          {{
            default() {
              return (
                <ElForm labelPosition="top">
                  <ElFormItem label={''}>
                    <MciInput placeholder="请输入" v-model={str.value} type={'textarea'} maxlength={1000} rows={16} />
                  </ElFormItem>
                </ElForm>
              );
            },
            footer() {
              return (
                <>
                  <MciButton onClick={() => emit('close')}>取消</MciButton>
                  <MciButton type="primary" onClick={confirmHandle}>
                    确定
                  </MciButton>
                </>
              );
            }
          }}
        </MciDialog>
      </>
    );
  }
});
